<template>
  <div class="news-trend">
    <div class="news-section">
      <h2 class="news-title">行业动态</h2>
      <div class="news-list">
        <div v-for="item in news" :key="item.id" class="news-item" :class="{ 'important': item.important }">
          <div class="news-content">
            <div class="news-header">
              <span class="news-category">领域：{{ item.category }}</span>
              <span class="news-hot">热度：{{ item.hot }}</span>
              <span class="news-date">{{ formatDate(item.date) }}</span>
            </div>
            <p class="news-text">{{ item.title }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="trend-section">
      <h2 class="trend-title">行业趋势</h2>
      <div ref="chartRef" class="trend-chart"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useWebsiteStore } from '~/stores/website'
import { storeToRefs } from 'pinia'
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'

const store = useWebsiteStore()
const { news } = storeToRefs(store)
const chartRef = ref<HTMLElement | null>(null)
let chart: echarts.ECharts | null = null

onMounted(() => {
  store.fetchNews()
  initChart()
})

const formatDate = (date: string) => {
  return new Date(date).toLocaleDateString('zh-CN', {
    month: 'numeric',
    day: 'numeric'
  })
}

const initChart = () => {
  if (chartRef.value) {
    chart = echarts.init(chartRef.value)
    const option = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['行业关键词1', '行业关键词2']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '行业关键词1',
          type: 'line',
          data: [12, 13, 10, 13, 9, 23, 21],
          smooth: true,
          areaStyle: {
            opacity: 0.1
          }
        },
        {
          name: '行业关键词2',
          type: 'line',
          data: [22, 18, 19, 23, 29, 33, 31],
          smooth: true,
          areaStyle: {
            opacity: 0.1
          }
        }
      ]
    }
    chart.setOption(option)
  }
}

</script>

<style scoped>
.news-trend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 1rem;
}

.news-section, .trend-section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 1rem;
}

.news-title, .trend-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #333;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.news-item {
  padding: 1rem;
  background: #f5f5f5;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.news-item:hover {
  transform: translateX(4px);
  background: #f0f0f0;
}

.news-item.important {
  border-left: 4px solid #ff4d4f;
}

.news-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.news-hot {
  font-size: 0.8rem;
  color: #ff4218;
  background: rgba(255, 59, 24, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
}

.news-category {
  font-size: 0.8rem;
  color: #1890ff;
  background: rgba(24, 144, 255, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
}

.news-date {
  font-size: 0.8rem;
  color: #999;
}

.news-text {
  margin: 0;
  color: #333;
  font-size: 0.95rem;
}

.trend-chart {
  width: 100%;
  height: 300px;
}
</style> 